import React, {Component} from 'react';

class FormDemo extends Component {
  constructor (props) {
    super(props);
    this.state = {
      value: '',
      name: '',
      age: 18
    };
  }
  handleSubmit (e) {
    e.preventDefault(); // 阻止表单提交
    const {value} = this.refs.name;
    console.log(value);
  }
  handleChange (key, e) {
    // console.log(key, e);
    this.setState({
      [key]: e.target.value
    });
  }
  render () {
    const {name, age} = this.state;
    return (
      <div>
        <h2>非受控组件</h2>
        <form onSubmit={this.handleSubmit.bind(this)}>
          <input ref="name" type="text" defaultValue="HangZhou"/>
          <button type="submit">Submit</button>
        </form>

        <input value={this.state.value} onChange={e => {this.setState({value: e.target.value.toUpperCase()})}} type="text"/>

        <input defaultValue={this.state.value} onChange={e => {this.setState({value: e.target.value.toUpperCase()})}} type="text"/>
        <hr/>
        <div>
          <input type="text" value={name} onChange={this.handleChange.bind(this, 'name')}/>
          <input type="text" value={age} onChange={this.handleChange.bind(this, 'age')}/>
        </div>
      </div>
    )
  }
}

export default FormDemo;
